﻿<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>分页表格 - Xui Demo</title>
	<!-- demo -->
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<script type="text/javascript" src="../demo_data.js"></script>
	
	<!-- xui -->
	<link rel="stylesheet" type="text/css" href="../../xui.css">
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="../../xui.js"></script>
	
	<!-- xtable -->
	<script type="text/javascript">
		$(function(){
			$("#goods_xtable").xtable({
				width:700,					//宽度默认  100%
				page:1,						//加载页面默认 1
				rows:4,						//每页行数默认 20
				paging:'#goods_xpaging',	//分页id
				xdata:$xdata				//静态数据
				//url:"$xdata"				//后台返回数据格式参考 $xdata
			});
		})
	</script>
</head>
<body>
	<h2>分页表格</h2>
	<table class="xtable" id="goods_xtable">
		<tr>
			<th>商品</th>
			<th width="100px">商品类型</th>
			<th width="80px">价格 </th>
			<th width="80px">销量</th>
		</tr>
		<tbody class="xtemplate">
			<tr>
				<td>{name}</td>
				<td>{typeName}</td>
				<td class="tr">{price}</td>
				<td class="tc">{sales}</td>
			</tr>
		</tbody>
	</table>
	<!--xpaging start-->
	<div class="xpaging" id="goods_xpaging">
		<div class="xtemplate">
			<span class="total">
				<span>共{total}条，</span>
				<span>每页</span><span class="xrows">{rows}</span><span>条</span>
			</span>
			<span class="xbtn xfirst" xval={first} title="首页"><span><i></i></span></span>
			<span class="xbtn xprev" xval={prev} title="上一页"><i></i></span>
			<span class="page">{page} / {size}</span>
			<span class="xbtn xnext" xval={next} title="下一页"><i></i></span>
			<span class="xbtn xlast" xval={last} title="尾页"><span><i></i></span></span>
			<span class="go">
				<input type="text" class="input xpage" size="2" />
				<span class="xbtn xgo">跳转</span>
			</span>
		</div>
	</div>
	<!--xpaging end-->
</body>
</html>